<template>
    <div class="flowHeaderTitles" >
        <div class="bpm-info-col bpm-info-col1">
            <div class="bpm-info-icon info-user">
                <i class="iconfont iconuser-account-fill"></i>
            </div>
            <div class="bpm-info-text">
                <div><rx-user-info :userId="bpmInst.createBy"/></div>
                <p>{{ i18n('founder', '创建人') }}</p>
            </div>
        </div>
        <div class="bpm-info-col">
            <div class="bpm-info-icon">
                <i class="iconfont iconchuangjian"></i>
            </div>
            <div class="bpm-info-text">
                <div :title="bpmInst.createTime">{{ bpmInst.createTime }}</div>
                <p>{{ i18n('creationTime', '创建时间') }}</p>
            </div>
        </div>
        <div class="bpm-info-col">
            <div class="bpm-info-icon">
                <i class="iconfont iconbiaoqian"></i>
            </div>
            <div class="bpm-info-text">
                <div :title="bpmInst.billNo">{{ bpmInst.billNo }}</div>
                <p>{{ i18n('orderNum', '单号') }}</p>
            </div>

        </div>
        <div :class="{'bpm-info-col':true, 'bpm-info-col1':showStatus}" v-if="showStatus">
            <div :class="['bpm-info-icon','bpm-info-icon-state',`bpm-info-icon-${status}`]">
                <i class="iconfont" :class="[`${state[status].icon}`]"></i>
            </div>
            <div class="bpm-info-text">
                <div>{{state[status].title}}</div>
                <p>{{ i18n('currentState', '当前状态') }}</p>
            </div>
        </div>
    </div>
</template>

<script>
import {RxGridEllipsis} from '@lowcode/jpaas-common-lib';
export default {
    name: "bpm-inst-info",
    props: {
        bpmInst: {type: Object},
        showStatus:{
            default: true
        },
        status:{
            default:'RUNNING'
        }},
    data(){
        return {
            state:{
                RUNNING:{ title: this.i18n('list.running','运行'), icon:'iconVue3jpaas-icon_bofang'},
                DRAFTED:{ title: this.i18n('option.draft','草稿'), icon:'iconcaogaoxiang'},
                SUCCESS_END:{ title: this.i18n('list.successEnd','成功结束'), icon:'iconicon'},
                CANCEL:{ title: this.i18n('list.cancel','作废'), icon:'iconquxiaoliuzhuan'},
                DELETE:{ title: this.i18n('list.revoke','撤销'), icon:'iconVue3jpaas-icon_huifu'},
                ABORT_END:{ title: this.i18n('option.abort','异常结束'), icon:'iconwarning'},
                ERROR_END:{ title: this.i18n('option.abort','异常结束'), icon:'iconwarning'},
                SUBMIT:{ title: this.$ti18('rxForm.commitBtn', '提交'), icon:'iconVue3jpaas-icon_tijiao'},
                LOCKED:{ title: this.i18n('list.reject','驳回'), icon:'iconbohui'},
                SUPSPEND:{ title: this.i18n('list.suspend','暂停'), icon:'iconVue3jpaas-icon_zanting'},
                PENDING:{ title: this.i18n('list.btnPending','挂起'), icon:'iconfuwenben'},
            }
        }
    },
    components:{RxGridEllipsis},
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "bpmInst", key);
        },
    }
}


</script>

<style scoped>

.bpm-info-col i{
    font-size: 18px;
}
.bpm-info-col.info-user i{
    font-size: 20px;
}
.info-user{
    background: linear-gradient(180deg, rgba(68, 129, 235, 1) 0%, rgba(4, 190, 254, 1) 100%)!important;
    color: #fff;
}
.flowHeaderTitles {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:10px 0 14px 10px;
    border-bottom: 10px solid #F5F5F5;
    border-top: 10px solid #F5F5F5;
    overflow: hidden;
}
.bpm-info-col{
    width: 30%;
    display: flex;
    padding-left: 20px;
}
.bpm-info-col1{
    width: 20%;
}
.bpm-info-icon{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #EAEAEC;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}
.bpm-info-icon-state{
    line-height: normal;
    background-color: #EAEAEC;
}
/*运行，成功结束*/
.bpm-info-icon.bpm-info-icon-RUNNING,
.bpm-info-icon.bpm-info-icon-SUCCESS_END{
    color: #fff;
    background: linear-gradient(180deg, #6BDF8E 0%, #0EA480 100%);
}
/*异常结束*/
.bpm-info-icon.bpm-info-icon-ABORT_END,
.bpm-info-icon.bpm-info-icon-ERROR_END{
    color: #fff;
    background: linear-gradient(360deg, #F05355 0%, #FF8571 100%);
}
/*驳回*/
.bpm-info-icon.bpm-info-icon-LOCKED{
    color: #fff;
    background: linear-gradient(360deg, #FF9900 0%, #FFBE3B 100%);
}
/*提交*/
.bpm-info-icon.bpm-info-icon-SUBMIT{
    color: #fff;
    background: linear-gradient(180deg, #4D92FE 0%, #0867FD 100%);
}

.bpm-info-icon.bpm-info-icon-state > i{
    font-size: 20px;
    display: inline-block;
    margin-top: -4px;
}

.bpm-info-text{
    padding-left: 8px;
    flex: 1;
    width: calc( 100% - 46px );

}
.bpm-info-text > div{
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    color: #303030;
}
.bpm-info-text > p{
    font-size: 12px;
    color: #909090;
}
.bpm-info-text > div,
.bpm-info-text > p{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

</style>